<template>
  <el-container>
    <el-main>
      <el-container>
        <el-aside style="width:260px; padding: 10px">
          <el-tree
            :data="treeData"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false" @node-click="nodeClick">
            <span slot-scope="{ data }" >
              <span><i :class="data.data.icon"></i> {{ data.data.menuName }}</span>
            </span>
          </el-tree>
        </el-aside>
        <el-main style="padding: 0;">
          <el-container>
            <el-header style="height:auto">
              <template v-if="currentItem.id">
              <h3 style="margin: 10px; padding: 0px;">当前菜单：{{ currentItem.data.menuPath }}</h3>
              <el-button icon="el-icon-edit" round @click="edit">编辑</el-button>
              <el-button type="primary" icon="el-icon-plus" round @click="add">添加子菜单</el-button>
              <el-button type="primary" icon="el-icon-delete" round @click="remove">删除当前菜单</el-button>
              </template>
            </el-header>
            <el-main>
              <el-table height="100%" :data="menuModules" border style="width: 100%" highlight-current-row>
                <el-table-column header-align="center" align="center" width="50">
                  <template slot="header">
                    <el-button type="text" icon="el-icon-plus" @click="showExclusionModules = true" title="新增" ></el-button>
                  </template>
                  <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-delete" @click="removeModule(scope.row)" title="删除"></el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="icon" label="icon" width="50" header-align="center" align="center">
                  <template slot-scope="scope">
                    <i :class="scope.row.icon"></i>
                  </template>
                </el-table-column>
                <el-table-column prop="moduleName" label="模块名/路径" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.moduleName }}<br>
                    {{ scope.row.fullUri }}
                  </template>
                </el-table-column>
                <el-table-column prop="label" label="标签" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="appId" label="应用程序代码" width="150" ></el-table-column>
                <el-table-column prop="isPublic" label="公开访问"  width="80" header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-button :type="scope.row.isPublic? 'success': 'info'" :icon="scope.row.isPublic? 'el-icon-check': 'el-icon-close'" circle></el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="enabled" label="启用" width="80" header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-button :type="scope.row.enabled? 'success': 'info'" :icon="scope.row.enabled? 'el-icon-check': 'el-icon-close'" circle></el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间/修改时间" header-align="center" align="center" width="150">
                  <template slot-scope="scope">
                    {{ scope.row.createTime }}<br>
                    {{ scope.row.updateTime }}
                  </template>
                </el-table-column>
              </el-table>
              <!-- <el-table height="50%" :data="menuLinks" border style="width: 100%" highlight-current-row>
                <el-table-column prop="linkName" label="链接名" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="label" label="标签" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="linkUri" label="链接地址" min-width="150" show-overflow-tooltip>

                </el-table-column>
                <el-table-column prop="icon" label="链接图标" width="80" header-align="center" align="center">
                  <template slot-scope="scope">
                    <i :class="scope.row.icon"></i>
                  </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" width="80" fixed="right">
                  <template slot="header">
                    <el-button type="text" icon="el-icon-plus" @click="addLink" title="新增" ></el-button>
                    <el-button type="text" icon="el-icon-refresh" @click="getLinks" title="刷新" ></el-button>
                  </template>
                  <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" @click="editLink(scope.row)" title="编辑"></el-button>
                    <el-button type="text" icon="el-icon-delete" @click="removeLink(scope.row)" title="删除"></el-button>
                  </template>
                </el-table-column>
              </el-table> -->
            </el-main>
          </el-container>
        </el-main>
      </el-container>

      <el-drawer :title="formTitle" :visible.sync="showEdit" @close="closeDialog" direction="rtl">
        <template slot="title">
          <div>
            <el-button @click="showEdit = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </template>
        <el-container>
          <el-main>
            <el-form :model="editItem" label-width="100px">
              <el-form-item label="菜单名">
                <el-input v-model="editItem.menuName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="标签">
                <el-input v-model="editItem.label" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="排序值">
                <el-input v-model="editItem.ordinal" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="图标">
                <mf-icon-list v-model="editItem.icon"></mf-icon-list>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>

      </el-drawer>

      <el-dialog title="请选择模块" :visible.sync="showExclusionModules" @opened="openModules">
        <ModulesReference ref="exclusions" :inclusionModules="menuModules"></ModulesReference>

        <div slot="footer" class="dialog-footer">
          <el-button @click="showExclusionModules = false">取 消</el-button>
          <el-button type="primary" @click="addModules">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
import {mapState, mapMutations, mapActions} from 'vuex';
import ModulesReference from '../components/ModulesReference.vue';
const STORE_MODULE = {
  "name": "menu",
  "state": [
    "treeData",
    "currentItem"
  ],
  "mutations": [
    "selectItem",
    "initItem"
  ],
  "actions": [
    "query",
    "create",
    "update",
    "delete"
  ]
};
export default {
  components:{
    ModulesReference
  },
  data() {
    return {
      createNew: true,
      showEdit: false,
      showEditModule: false,
      showExclusionModules: false,
      showEditLink: false,
      menuModules:[],
      menuLinks:[],
      editItem: {
        appId: null,
        parentMenuId: null,
        menuId: null,
        menuName: null,
        menuPath: null,
        label: null,
        ordinal: null
      },
      editModuleItem: {
        appId: null,
        parentMenuId: null,
        menuId: null,
        label: null,
        ordinal: null
      },
      editLinkItem: {
        linkId: null,
        appId: null,
        menuId: null,
        linkName: null,
        linkUri: null,
        icon: null,
        openMode: null,
        label: null,
        ordinal: null
      }
    }
  },
  computed: {
    ...mapState(STORE_MODULE.name, STORE_MODULE.state),
    formTitle(){
      return this.createNew ? "新建子菜单":"编辑当前菜单";
    }
  },
  mounted() {
    this.initItem();
    this.query();
  },
  methods: {
    ...mapMutations(STORE_MODULE.name, STORE_MODULE.mutations),
    ...mapActions(STORE_MODULE.name, STORE_MODULE.actions),
    nodeClick(data){
      this.selectItem(data);
      this.getModules();
      this.getLinks();
    },
    getModules(){
      let data = this.currentItem.data;
      if (data.appId && data.menuId)
        this.$service.menu.modules({params:{ appId: data.appId, menuId: data.menuId }}).then((r) => {
          if (r.success)
            this.menuModules = r.data;
        });
    },
    getLinks(){
      let data = this.currentItem.data;
      if (data.appId && data.menuId)
        this.$service.menu.links({params:{ appId: data.appId, menuId: data.menuId }}).then((r) => {
          if (r.success)
            this.menuLinks = r.data;
        });
    },
    closeDialog(){},

    resetForm(){
      for(var name in this.editItem)
        this.editItem[name] = null;
    },
    add(){
      this.resetForm();
      let data = this.currentItem.data;
      this.editItem.appId = data.appId;
      this.editItem.parentMenuId = data.menuId;

      this.showEdit = true;
      this.createNew = true;
    },
    edit(){
      this.resetForm();
      for(var name in this.editItem)
        this.editItem[name] = this.currentItem.data[name];
      this.showEdit = true;
      this.createNew = false;
    },
    save(){
      let task = this.createNew ? this.create(this.editItem) : this.update(this.editItem);
      task.then((response) => {
        if (response.success){
          let vo = response.data;
          if (this.createNew){
            this.currentItem.children = this.currentItem.children || [];
            this.currentItem.children.push({
              id: vo.menuId,
              data: vo,
              children: []
            });
          }
          else{
            for(var name in this.currentItem.data)
              this.currentItem.data[name] = vo[name];

          }

          alert("保存成功","消息","success", ()=>{this.showEdit = false; this.createNew = true;});

        }
      });
    },
    remove(){
      let data = this.currentItem.data;
      confirm('确认要删除[' + data.menuName + ']吗？请谨慎操作！', '警告', 'warning', ()=>{

        this.delete(data.menuPath).then((response) => {
          if (response.success) {
            this.initItem();
            this.query();
          }
          else {
            let msg = response.message || "操作失败";
            alert(msg,"消息","error");
          }
        });
      });
    },
    editModule(row){
      for(var name in this.editModuleItem)
        this.editModuleItem[name] = row[name];
      this.showEditModule = true;
    },
    saveModule(){
      this.$service.menu.updateModule({data:this.editModuleItem}).then((response) => {
        if (response.success){
          alert("保存成功","消息","success", ()=>{this.showEditModule = false; });

        }
      });
    },
    openModules(){
      this.$refs.exclusions.query();
    },
    addModules(){
      let items = this.$refs.exclusions.getSelection();

      let data = this.currentItem.data;
      this.$service.menu.addModules({
        data: {appId: data.appId, menuId: data.menuId, modules:items}
      }).then(r =>{
        if(r.success)
        this.menuModules = r.data;
      });

      this.showExclusionModules = false;
    },
    removeModule(row){
      confirm('确认要菜单中删除['+row.moduleName+']吗？请谨慎操作！', '警告', 'warning', ()=>{

      let data = this.currentItem.data;
      this.$service.menu.removeModules({data: {appId: data.appId, menuId: data.menuId, modules: [row.moduleId]}}).then((response) => {
          if (response.success) {
            this.menuModules = response.data;
          }
          else {
            let msg = response.message || "操作失败";
            alert(msg,"消息","error");
          }
        });
      });
    },
    addLink(){
      this.showEditLink = true;
    },
    editLink(row){
      for(var name in this.editLinkItem)
        this.editLinkItem[name] = row[name];
      this.showEditLink = true;
    },
    saveLink(){

      let task = this.createNewLink ? this.$service.menu.createLink({data:this.editLinkItem}) :this.$service.menu.updateLink({data:this.editLinkItem});
      task.then((response) => {
        if (response.success){
          alert("保存成功","消息","success", ()=>{this.showEditLink = false; this.createcreateNewLinkNew = true;});

        }
      });
    },
    removeLink(row){
      confirm('确认要菜单中删除['+row.linkName+']吗？请谨慎操作！', '警告', 'warning', ()=>{

      this.$service.menu.deleteLink({data: row.linkId}).then((response) => {
          if (!response.success) {
            let msg = response.message || "操作失败";
            alert(msg,"消息","error");
          }
          else{
          }
        });
      });
    },
  }
}
</script>
